<template>
  <!-- 个人信息页面 -->
  <div>
    <!-- 修改头像开始 -->
    <div class="header">
      <div class="block left">
        <el-avatar shape="circle" :size="80" :src="UserData.userFace" />
      </div>
      <div class="right">
        <el-button type="text" @click="toupdateImg()">修改头像</el-button>
      </div>
    </div>
    <!-- 修改头像结束-->

    <el-divider />

    <!-- 个人信息开始 -->
    <div class="center">
      <p><label>登录用户</label>{{ UserData.username }}</p>
      <p><label>用户姓名</label>{{ UserData.realname }}</p>
      <p><label>用户手机</label>{{ UserData.telephone }}</p>
      <p><label>用户性别</label>{{ UserData.gender }}</p>
      <p><label>用户角色</label></p>
      <p><label>用户生日</label>{{ UserData.birth | fmtDate() }}</p>
      <p><label>注册时间</label>{{ UserData.certificationTime | fmtDate() }}</p>
      <p><label>邮箱</label>{{ UserData.email }}</p>
      <p>
        <label>用户状态</label>
        <el-tag>{{ UserData.status }}</el-tag>
      </p>
    </div>
    <!-- 个人信息结束 -->

    <el-divider />

    <div class="footer">
      <el-button type="text" @click="toEidt">修改个人信息</el-button>
    </div>

    <!-- 修改个人信息的模态框 -->
    <el-dialog title="修改个人信息" :visible.sync="Visible">
      <el-form :model="UserData" :rules="rules">
        <el-form-item
          label="登录用户"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input v-model="UserData.username" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          prop="realname"
        >
          <el-input v-model="UserData.realname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
          <el-radio-group v-model="UserData.gender">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户手机" :label-width="formLabelWidth">
          <el-input v-model="UserData.telephone" clearable />
        </el-form-item>
        <el-form-item label="用户邮箱" :label-width="formLabelWidth">
          <el-input v-model="UserData.email" clearable />
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="UserData.birth"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="Visible = false">取 消</el-button>
        <el-button type="primary" @click="toSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改个人信息的模态框 -->

    <!-- 修改用户头像模态框 -->
    <el-dialog title="修改头像" :visible.sync="visibleImg" :model="UserData">
      <el-upload
        class="avatar-uploader"
        :action="uploadFileURL"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Visible = false">取 消</el-button>
        <el-button type="primary" @click="toImg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInfo as getUser, saveOrUpdate, alterUserface } from '@/api/user'
import { fmtDate } from '@/filters/index'
import { mapGetters } from 'vuex'
import { uploadFileURL } from '@/utils/config'
export default {
  data() {
    return {
      labelPosition: 'right',
      // 个人信息数据
      UserData: [],
      // 表单文字的宽度
      formLabelWidth: '80px',
      // 图片变量
      imageUrl: '',
      // 表单对象
      // 模态框显示与隐藏
      Visible: false,
      // 表单校验
      rules: {
        realname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'blur' }]
      },
      // 头像模态框
      visibleImg: false,
      // 图片资源路径
      uploadFileURL
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.getUserInfo()
  },
  mounted() {},
  methods: {
    // 获取用户的个人信息数据
    async getUserInfo() {
      const res = await getUser(this.token)
      console.log(res)
      this.UserData = res.data
    },
    // 点击修改按钮
    toEidt() {
      this.Visible = true
    },
    // 模态框的确定按钮 提交修改信息事件
    async toSubmit() {
      await saveOrUpdate(this.UserData)
      this.Visible = false
    },
    // 点击修改用户图片按钮
    toupdateImg() {
      this.visibleImg = true
    },
    // 保存用户头像事件
    async toImg() {
      // console.log(this.UserData.userFace,'11');
      const res = await alterUserface({
        id: this.UserData.id,
        userface: this.UserData.userFace
      })
      this.visibleImg = false
      this.$message({
        type: 'success',
        message: res.message
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.UserData.userFace = res.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style lang="scss">
.header {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;

  .right {
    span {
      font-size: 12px;
    }
  }
}
.center {
  p {
    font-size: 14px;
    color: #606266;
    margin-bottom: 25px;
    margin-left: 250px;
    label {
      margin-right: 20px;
    }
  }
}
.footer {
  padding: 0px 30px;
  float: right;
  margin-right: 230px;
}
</style>
